<template>
	<el-row>
		<el-header style="background-color: white">
			<label class="subtitle"> 公告管理 </label>
			<el-form :inline="true" :model="formInline" class="pull-right">
				<el-form-item label="标题">
					<el-input v-model="formInline.title" placeholder="标题"></el-input>
				</el-form-item>

				<el-button type="primary" @click="getLists()">搜索</el-button>

				<el-button type="primary" v-show="this.isShow" @click="newNotice(),edilNoticeTableVisible = true">新增</el-button>

			</el-form>
		</el-header>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="name" label="发布人">
			</el-table-column>
			<el-table-column prop="title" label="标题">
			</el-table-column>
			<el-table-column prop="dateline" label="发布时间">
			</el-table-column>
			<el-table-column prop="content" label="内容">
			</el-table-column>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="200px">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="编辑" placement="top">
						<el-button v-show="isShow" type="primary" icon="el-icon-edit" circle size="small" @click="edilNotice(scope.$index, scope.row),edilNoticeTableVisible = true"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除" placement="top">
						<el-button v-show="isShow" type="danger" icon="el-icon-error" circle size="small" @click="delNotice(scope.$index, scope.row)"></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="看评论" placement="top">
						<el-button type="primary" icon="el-icon-view" circle size="small" @click="detailNotice(scope.$index, scope.row),detailNoticeTableVisible = true"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页条 -->
		<el-pagination class="pull-right" :current-page="page" :page-sizes="[10, 50, 100, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
		 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
		</el-pagination>
		<!-- 查看评论信息 -->
		<el-dialog title="公告信息" :visible.sync="detailNoticeTableVisible" width="50%">
			<!-- 公告内容 -->
			<el-card class="box-card" shadow="hover">
				<div slot="header" class="clearfix">
					<span>标题:{{detailForm.title}}</span><br />
					<span>内容:{{detailForm.content}}</span><br />
					<span>发布人:{{detailForm.name}} 发布时间:{{detailForm.dateline}}</span></br>
				</div>
				<!-- 评论内容 -->
				<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;height: 200px;">
					<!-- <span v-for="comment in comments" :key="comment.id" class="infinite-list-item">
						{{ comment.name }}:{{ comment.content }}、{{ comment.dateline }}
						<el-tooltip class="item" effect="dark" content="删除" placement="top">
							<el-button v-show="isShow" type="danger" icon="el-icon-error" circle size="small" @click="delContent(comment.id)"></el-button>
						</el-tooltip><br />
					</span> -->

					<el-timeline>
						<el-timeline-item v-for="(comment, index) in comments" :key="index" :size="comment.size" :timestamp="comment.dateline"   color="#0bbd87">
							{{ comment.name }}： {{comment.content}}
							<el-tooltip class="item" effect="dark" content="删除" placement="top">
								<el-button v-show="isShow" type="danger" icon="el-icon-error" circle size="small" @click="delContent(comment.id)"></el-button>
							</el-tooltip><br />
						</el-timeline-item>
					</el-timeline>

				</ul>


			</el-card>
			<!-- 发起评论 -->
			<el-input placeholder="评论信息" v-model="publishContent" maxlength="30" show-word-limit style="width:84.5%;float:left;"></el-input>
			<el-button type="primary" @click="publish" :disabled="this.publishContent==''?true:false">评论</el-button>
		</el-dialog>

		<!-- 编辑公告信息 -->
		<el-dialog title="公告信息" :visible.sync="edilNoticeTableVisible" width="30%">
			<el-form ref="edilForm" :model="edilForm" label-width="80px" size="mini">
				<el-form-item label="发布人">
					<el-input v-model="edilForm.name"></el-input>
				</el-form-item>
				<el-form-item label="发布时间">
					<el-input v-model="edilForm.dateline"></el-input>
				</el-form-item>
				<el-form-item label="标题">
					<el-input v-model="edilForm.title"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<el-input v-model="edilForm.content"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="updateNotice">修改</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

	</el-row>
</template>
<script>
	export default {
		data() {
			return {
				isShow: true,
				page: 1,
				total: 10,
				publishContent: "",
				tableData: [],
				formInline: {
					title: ''
				},
				edilForm: {
					uid: 0,
					name: "",
					title: "",
					dateline: "",
					content: "",
				},
				detailForm: {
					uid: 0,
					nid: 0,
					name: "",
					title: "",
					dateline: "",
					content: "",
				},
				count: 0,
				comments: [],
				detailNoticeTableVisible: false,
				edilNoticeTableVisible: false
			}
		},
		methods: {

			//--------------------------------------------------------------------
			//新增公告
			//--------------------------------------------------------------------
			newNotice() {
				this.edilForm.name = this.$cookie.get("name")
				this.edilForm.uid = this.$cookie.get("id")
				this.edilForm.title = ""
				this.edilForm.dateline = "2019-11-26 20:31:07"
				this.edilForm.content = ""
			},
			//--------------------------------------------------------------------
			//看评论
			//--------------------------------------------------------------------
			detailNotice(index, row) {
				this.detailForm.id = row.id
				this.detailForm.uid = row.uid
				this.detailForm.name = row.name
				this.detailForm.title = row.title
				this.detailForm.dateline = row.dateline
				this.detailForm.content = row.content
				this.$axios({
					method: 'get',
					url: '/comment/commentAndUserdata',
					params: {
						nid: row.id,
						page: this.page,
					}
				}).then(res => {
					console.log(res.data.data.list)
					this.comments = res.data.data.list
				}).catch(err => {
					this.$message(err)
				})
			},
			load() {
				this.count += 2
			},
			//--------------------------------------------------------------------
			//编辑
			//--------------------------------------------------------------------
			edilNotice(index, row) {
				this.edilForm.id = row.id
				this.edilForm.uid = row.uid
				this.edilForm.name = row.name
				this.edilForm.title = row.title
				this.edilForm.dateline = row.dateline
				this.edilForm.content = row.content
			},
			//--------------------------------------------------------------------
			//发表评论
			//--------------------------------------------------------------------
			publish() {
				this.$axios({
					method: 'get',
					url: '/comment/save',
					params: {
						uid: this.$cookie.get("id"),
						nid: this.detailForm.id,
						content: this.publishContent
					}
				}).then(res => {
					if (res.data.state) {
						this.getLists()
						this.detailNoticeTableVisible = false
						this.$message("评论成功")
					} else {
						this.$message("评论失败")
					}
				}).catch(err => {
					this.$message(err)
				})
			},
			//--------------------------------------------------------------------
			//修改公告
			//--------------------------------------------------------------------
			updateNotice() {
				this.$axios({
					method: 'get',
					url: '/notice/save',
					params: {
						id: this.edilForm.id,
						uid: this.edilForm.uid,
						name: this.edilForm.name,
						title: this.edilForm.title,
						dateline: this.edilForm.dateline,
						content: this.edilForm.content
					}
				}).then(res => {
					if (res.data.state) {
						this.getLists()
						this.edilNoticeTableVisible = false
						this.$message("修改成功")
					} else {
						this.$message("修改失败")
					}
				}).catch(err => {
					this.$message(err)
				})
			},
			//--------------------------------------------------------------------
			//更新页面数据
			//--------------------------------------------------------------------
			getLists() {
				this.$axios({
					method: 'get',
					url: '/notice/noticeAndUserdata',
					params: {
						title: this.formInline.title.trim(),
						page: this.page,
					}
				}).then(res => {
					this.tableData = res.data.data.list
					this.total = res.data.data.total
				}).catch(err => {
					this.$message(err)
				})
			},
			//--------------------------------------------------------------------
			//删除公告
			//--------------------------------------------------------------------
			delNotice(index, row) {
				this.$confirm('此操作将删除此用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'DELETE',
						url: '/notice/remove/' + row.id
					}).then(res => {
						if (res.data.state == true) {
							this.$message("删除成功")
							this.getLists()
						} else {
							this.$message("删除失败")
						}
					}).catch(err => {
						this.$message(err)
					})
				})

			},
			//--------------------------------------------------------------------
			//删除评论
			//--------------------------------------------------------------------
			delContent(id) {
				this.$confirm('此操作将删除此评论, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'DELETE',
						url: '/comment/remove/' + id
					}).then(res => {
						if (res.data.state == true) {
							this.$message("删除成功")
							this.getLists()
							this.detailNoticeTableVisible = false
						} else {
							this.$message("删除失败")
						}
					}).catch(err => {
						this.$message(err)
					})
				})

			},
			//--------------------------------------------------------------------
			//更新当前条数并刷新当前页面数据
			//--------------------------------------------------------------------
			handleSizeChange(total) {
				this.total = total
				this.getLists()
			},
			//--------------------------------------------------------------------
			//更新当前条页并刷新当前页面数据
			//--------------------------------------------------------------------
			handleCurrentChange(page) {
				this.page = page
				this.getLists()
			}
		},
		//--------------------------------------------------------------------
		//初始化页面数据
		//--------------------------------------------------------------------
		created() {
			this.isShow = parseInt(this.$cookie.get("type")) > 3
			this.$axios({
				method: 'get',
				url: '/notice/noticeAndUserdata',
				params: {
					page: this.page,
					total: this.total,
				}
			}).then(res => {
				this.tableData = res.data.data.list
				this.total = res.data.data.total
			}).catch(err => {})
		}

	}
</script>
